{% extends 'layout.html' %}
{% block title %}任务管理{% endblock %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px"> {# 按钮"新建部门"和面板表添加10像素的距离 #}
            <a class="btn btn-success" href="/tools/task/list/add/" target="_blank">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新增任务
            </a>
            <!-- 批量操作按钮组 -->
            <div class="btn-group" style="margin-left: 10px;">
                <button id="batchDelete" class="btn btn-danger" disabled>
                    <span class="glyphicon glyphicon-trash"></span>
                    批量删除
                </button>
            </div>

            {% comment %}<!-- 搜索框 -->
            <div style="float: right; width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="query" class="form-control" placeholder="Search for..."
                            value="{{ search_data }}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>

                    </div>
                </form>
            </div>{% endcomment %}

            <!-- 多条件搜索框 -->
            <div style="float: right; width: 650px;">
                <form method="get" class="form-inline">
                    <div class="form-group">
                        <input id="search_title" type="text" name="title" class="form-control" placeholder="任务名称"
                               value="{{ search_title }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <input id="search_detail" type="text" name="detail" class="form-control" placeholder="任务详情"
                               value="{{ search_detail }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <select id="level_choice" name="level" class="form-control" style="width: 120px;">
                            <option value="">-- 任务级别 --</option>
                            {% for item in level_choice %}
                                <option value="{{ item.0 }}" {% if search_level == item.0|stringformat:"s" %}selected{% endif %}>
                                    {{ item.1 }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <input id="search_user" type="text" name="user" class="form-control" placeholder="负责人"
                               value="{{ search_user }}" style="width: 120px;">
                    </div>

                    <button id="btn_search" type="submit" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        搜索
                    </button>

{#                    <a href="/tools/task/list/" class="btn btn-default">#}
{#                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>#}
{#                        重置#}
{#                    </a>#}
                    <button id="reset" type="submit" class="btn btn-default pull-right" >
                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        重置
                    </button>
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                任务列表
            </div>

            <!-- Table 表格 -->
            <table class="table table-bordered">  {# table-bordered  边框 #}
                <thead>
                    <tr>
                        <th width="50px"><input type="checkbox" id="selectAll"></th>
                        <th>ID</th>
    {#                    <th>任务级别</th>#}
    {#                    <th>任务名称</th>#}
    {#                    <th>任务详情</th>#}
    {#                    <th>任务负责人</th>#}
                        <form method="post">
                            {% for field in form %}
                                <th>{{ field.label }}</th>
                            {% endfor %}
                        </form>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for obj in querySet %}
                        <tr>
                            <td><input type="checkbox" class="rowCheckbox" value="{{ obj.id }}"></td>
                            <th scope="row">{{ obj.id }}</th>
                            <td>{{ obj.get_level_display }}</td>
                            <td>{{ obj.title }}</td>
                            <td>{{ obj.detail }}</td>
                            <td>{{ obj.user.username }}</td>
                            <td>
                                <a class="btn btn-primary btn-xs" href="/tools/task/{{ obj.id }}/edit/">编辑</a>
    {#                            <a class="btn btn-danger btn-xs" href="/tools/task/delete/?nid={{ obj.id }}">删除</a>#}
                                <a class="btn btn-danger btn-xs delete-btn" href="/tools/task/{{ obj.id }}/delete/">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页导航 -->
        <ul class="pagination">
            {#            style="position: absolute;transform: translate(50%);" 居中设置 根据实际情况改动       #}
            {{ page_string }}
        </ul>
    </div>
{% endblock %}


{% block js %}
    <script type="text/javascript">
        {#import toast from "../../static/plugins/bootstrap-4.6.2/js/src/toast";#}

        {% comment %}
                // 查询
                $('#btn_search').on('click',function(){
                    $('#articles-table').bootstrapTabls('refersh')
                });
                {% endcomment %}

        // 重置
        $('#reset').click(function () {
            $('#search_title').val('');
            $('#search_detail').val('');
            $('#level_choice').val('');
            $('#search_user').val('');
        });


        // 下拉框样式控制（默认灰色字体，下拉选择后黑色）
        // 页面加载时初始化
        $(document).ready(function() {
            if ($('#level_choice').val() === '') {
                $('#level_choice').css('color', '#999');
            }
            // 选择变化时切换样式
            $('#level_choice').change(function() {
                if ($(this).val() === '') {
                    $(this).css('color', '#999');
                } else {
                    $(this).css('color', '#333');
                }
            });
        });


        // 基于jQuery绑定事件
        $(function () {
            // 页面框架加载完成后代码自动执行
            bindBtn1Event();
        });

        function bindBtn1Event() {
            $('#btn1').click(function () {
                $.ajax({
                    url: '/tools/task/ajax/',
                    type: 'post',
                    data: {
                        n1: 123,
                        n2: 456,
                    },
                    success: function (res) {
                        console.log("返回数据:", res);
                    }
                })
            })
        }


        // 复选框全选/取消全选
        {#$('#selectAll').click(function() {#}
        {#    $('.rowCheckbox').prop('checked', this.checked);#}
        {#    updateBatchDeleteButton();#}
        {#});#}
        {##}
        {#// 单个复选框点击事件#}
        {#$(document).on('click', '.rowCheckbox', function() {#}
        {#    var allChecked = $('.rowCheckbox:checked').length === $('.rowCheckbox').length;#}
        {#    $('#selectAll').prop('checked', allChecked);#}
        {#    updateBatchDeleteButton();#}
        {#});#}
        {##}
        {#// 更新批量删除按钮状态#}
        {#function updateBatchDeleteButton() {#}
        {#    var checkedCount = $('.rowCheckbox:checked').length;#}
        {#    $('#batchDelete').prop('disabled', checkedCount === 0);#}
        {#}#}
        {##}
        {#// 批量删除功能#}
        {#$('#batchDelete').click(function() {#}
        {#    var selectedIds = [];#}
        {#    $('.rowCheckbox:checked').each(function() {#}
        {#        selectedIds.push($(this).val());#}
        {#    });#}
        {##}
        {#    if (selectedIds.length === 0) {#}
        {#        alert('请至少选择一条记录');#}
        {#        return;#}
        {#    }#}
        {##}
        {#    if (!confirm('确定要删除选中的 ' + selectedIds.length + ' 条记录吗？')) {#}
        {#        return;#}
        {#    }#}
        {##}
        {#    $.ajax({#}
        {#        url: '/tools/task/batch_delete/',#}
        {#        type: 'POST',#}
        {#        data: {#}
        {#            'ids': selectedIds,#}
        {#            'csrfmiddlewaretoken': '{{ csrf_token }}'#}
        {#        },#}
        {#        success: function(response) {#}
        {#            if (response.success) {#}
        {#                alert('删除成功');#}
        {#                location.reload();#}
        {#            } else {#}
        {#                alert('删除失败: ' + response.message);#}
        {#            }#}
        {#        },#}
        {#        error: function() {#}
        {#            alert('请求失败，请重试');#}
        {#        }#}
        {#    });#}
        {#});#}
        {##}
        {#// 单个删除确认#}
        {#$(document).on('click', '.delete-btn', function(e) {#}
        {#    if (!confirm('确定要删除这条记录吗？')) {#}
        {#        e.preventDefault();#}
        {#    }#}
        {#});#}

        {#// 删除#}
        {#$('#delete').click(function (e) {#}
        {#    e.preventDefault();#}
        {#    var checkedbox = $('#articles-table').bootstrapTable('getSelections'); // 获取选中的数据#}
        {#    var ids = []#}
        {#    for (var i = 0; i < checkedbox.length; i++){#}
        {#        var id = checkedbox[i].id; // 获取选择行的值#}
        {#        ids.push(id)#}
        {#    }#}
        {##}
        {#    $.ajax({#}
        {#        catche: false,#}
        {#        type: 'POST',#}
        {#        url: {% url 'task_delete' %},#}
        {#        dataType: 'json',#}
        {#        data: {'ids': ids},#}
        {#        success: function (data) {#}
        {#            if (data.ret){#}
        {#                toastr.success(data.msg, '成功提示');#}
        {#                $articlesTable.bootstrapTable('refersh');#}
        {#            } else {#}
        {#                toastr.errors(data.msg, '失败提示')#}
        {#            }#}
        {#        }#}
        {#    });#}
        {#})#}
    </script>
{% endblock %}